<template>
	<view class="merchants">
		<view class="table_box my-mgt-26">
			<view class="th">
				<view class="th_li" style="width: 44%;">时间</view>
				<view class="th_li" style="width: 28%;">交易单号</view>
				<view class="th_li" style="width: 28%; padding-right: 30rpx;">交易金额</view>
			</view>
			<scroll-view scroll-y="true" class="scroll_position">
				<template v-if="dev.list.length > 0">
					<view class="td"  v-for="(item,index) in dev.list" :key="item.id">
						<view class="td_li" style="width: 44%;">{{item.transTime || '--'}}</view>
						<view class="td_li shengluehao" style="width: 28%;">{{item.tranRefCode}}</view>
						<view class="td_li" style="width: 28%;">{{item.transAmount.toFixed(2)}}</view>
					</view>
				</template>
				<view style="width: 100%;height: 300rpx;line-height: 300rpx;text-align: center;" v-else>暂无数据</view>
			</scroll-view>
			<!-- <view class="moll_box my-mgt-10" @click="loadPage()">
				<text class="my-mgr-8">查看更多</text><image style="width: 25rpx;height: 25rpx;" src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/CuJEctAIBo_dropdown.png" mode=""></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	/* TODO 替换方法和数据*/
	import { directTranscationApi } from "@/api/direct.js"
	export default {
		data() {
			return {
				id: 0,
				dev: {
					pageIndex: 0,
					pageSize: 30,
					list: [],
					total:1,
				},
			};
		},
		
		onLoad(options) {
			this.id = options.id
			this.loadPage()
		},
		// 上拉加载更多
		onReachBottom() {
			this.loadPage()
		},
		methods: {
			async loadPage() {
				if(this.dev.list.length>=this.dev.total) {
					uni.showToast({
						title: "没有更多数据了",
						icon: "none"
					})
					return 
				}
				let params = {
					id: this.id,
					pageIndex: this.dev.pageIndex,
					pageSize: this.dev.pageSize
				}
				uni.showLoading({
					title:"正在加载中...."
				})
				const res = await directTranscationApi(params)
				if(res.statusCode === 200){
					uni.hideLoading()
					this.dev.list = this.dev.list.concat(res.data.data.rows)
					this.dev.total = res.data.data.total
					this.dev.pageIndex ++
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.merchants {
		width: 100%;
		background: #F7F7F7;
		.table_box{
			width: 100%;
			min-height:120rpx;
			padding-top: 20rpx;
			.th{
				/* background: #FFEDE9;*/
			}
			.td {
				padding: 0 30rpx;
			}
			.th,.td{
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				background: #FFFFFF;
				
				.th_li,.td_li{
					width: 33%;
					height: 100%;
					font-weight: 400;
					text-align: center;
					line-height: 80rpx;
					border-bottom: 1px solid #f2f2f2;
				}
				.shengluehao{
					text-overflow:ellipsis;
					white-space: nowrap; 
					overflow: hidden;
				}
				.th_li{
					font-size: 28rpx;
					color: #000000;
				}
				.td_li{
					font-size: 26rpx;
					color: #333333;
				}
			}
			// .moll_box{
			// 	width: 100%;
			// 	height: 60rpx;
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;
			// 	font-size: 20rpx;
			// 	font-weight: 500;
			// 	// color: #FF532B;
			// }
			.scroll_position {
				// height: 640rpx;
				overflow-y: auto;
			}
		}
	}
</style>